import React, { useEffect, useState } from "react";
import { Drawer } from "@ct0/ui";

function LazyC() {
  return <div>I'm a lazy</div>;
}

export default function DrawerPanel() {
  const [a, setA] = useState(false);
  const [b, setB] = useState(false);
  const [c, setC] = useState(false);

  return (
    <div>
      <button onClick={() => setA(true)}>打开 A</button> &nbsp;
      <button onClick={() => setB(true)}>打开 B</button> &nbsp;
      <button onClick={() => setC(true)}>打开 C (Lazy load)</button>
      <Drawer open={a} title="a" onClose={() => setA(false)} />
      <Drawer open={b} title="b" onClose={() => setB(false)} />
      <Drawer open={c} title="c" onClose={() => setC(false)} lazyLoad={LazyC} />
      <br />
      <br />
      <table border="1">
        <thead>
          <tr>
            <th>参数</th>
            <th>说明</th>
            <th>默认值</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>open</td>
            <td>是否打开侧拉</td>
            <td>false</td>
          </tr>
          <tr>
            <td>width</td>
            <td>侧拉面板宽度</td>
            <td>640px</td>
          </tr>
          <tr>
            <td>title</td>
            <td>侧拉面板展示标题</td>
            <td></td>
          </tr>
          <tr>
            <td>confirmDisabled</td>
            <td>禁用确认按钮，比如表单不合法，禁止提交</td>
            <td>false</td>
          </tr>
          <tr>
            <td>confimLoading</td>
            <td>确认按钮 loading，比如表单提交中</td>
            <td>false</td>
          </tr>
          <tr>
            <td>footer</td>
            <td>自定义底部节点</td>
            <td>默认为 “取消” 和 “确认” 按钮</td>
          </tr>
          <tr>
            <td>extraButtons</td>
            <td>扩展按钮</td>
            <td>空</td>
          </tr>
          <tr>
            <td>onClose</td>
            <td>关闭回调函数</td>
            <td></td>
          </tr>
          <tr>
            <td>onConfirm</td>
            <td>确认回调函数</td>
            <td></td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}
